<template>
  <div class="preview calendar2">
    <el-dialog :title="title"
               size="small"
               :visible.sync="previewDialogVisible"
               @close="close"
               @open="open"
               :close-on-click-modal="false">
      <div class="main">
        <ul class="list" :class="'size-'+previewSize" ref="pageList">
          <li class="item" v-for="(page,index) in data">
            <div class="customization">
              <div class="page-img front" :class="{fill:index===12}"
                   :style="{backgroundImage:`url(${page.pic})`}"></div>
              <img class="months-info"
                   v-if="index < 12"
                   :src="`http://image2.artup.com/static/pc/images/guali_template/guali_600*500/gualishu2018${12-index}.png`">
            </div>
            <div class="page-img back"></div>
          </li>
        </ul>
        <button @click="upward"><i class="iconfont icon-shangfan"></i>上翻</button>
        <button @click="down"><i class="iconfont icon-xiafan"></i>下翻</button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable no-undef */

  export default {
    props: {
      title: {
        type: String,
        default: '预览挂历'
      },
      visible: {
        type: Boolean,
        default: false
      },
      interval: {
        type: Number,
        default: 4000
      },
      data: {
        type: Array,
        default: []
      },
      previewSize: {
        type: String,
        default: '260X380'
      }
    },
    data: function () {
      return {
        pageNum: 1,
        revolutionState: 0,
        isTurn: false,
        previewDialogVisible: this.visible
      }
    },
    methods: {
      close: function () {
        this.$emit('close', false)
      },
      open: function () {
        if (!this.isTurn) {
          this.isTurn = true
        } else {
        }
      },
      upward: function () {
        var items = this.$refs.pageList.getElementsByClassName('item')
        if (this.pageNum > items.length - 1) {
          return
        }
        var last = items[items.length - this.pageNum]
        last.style.transform = 'rotateX(' + (180 - this.pageNum) + 'deg)'
        this.pageNum++
        setTimeout(function () {
          last.getElementsByClassName('back')[0].style.zIndex = '200'
        }, 1000)
      },
      down: function () {
        let _self = this
        if (this.pageNum <= 1) {
          return
        }
        this.pageNum--
        var items = this.$refs.pageList.getElementsByClassName('item')
        var last = items[items.length - this.pageNum]
        last.style.transform = 'rotateX(0deg)'
        setTimeout(function () {
          last.getElementsByClassName('back')[0].style.zIndex = '1'
        }, 1000)
        if (this.pageNum === 1 && this.revolutionState) {
          setTimeout(function () {
            _self.$refs.pageList.style.transform = 'rotateZ(0deg)'
          }, 1020)
        }
      }
    },
    watch: {
      pageNum: function (val) {
        let _self = this
        let top = (val === 1) ? 0 : 300
        setTimeout(function () {
          _self.$refs.pageList.style.paddingTop = `${top}px`
        }, 500)
      },
      visible: function (val) {
        this.previewDialogVisible = val
      }
    },
    created: function () {
    }
  }
</script>

<style lang="scss" rel="stylesheet/sass">
  .preview.calendar2 {
    user-select: none;
    .el-dialog--small {
      top: 50% !important;
      width: 500px !important;
      margin-top: -326px;
      overflow: hidden;
    }
    .main {
      perspective: 1000px;
      text-align: center;
    }

    .list {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto 20px;
      transform-style: preserve-3d;
      transition: 800ms ease-in;
    }
    .list.size-260X380 {
      width: 182px;
      .item {
        width: 182px;
      }
      .months-info {
        height: 22px;
      }
    }
    .list.size-500X600 {
      width: 253px;
      .item {
        width: 253px;
      }
      .months-info {
        height: 40px;
      }
    }
    .list.size-600X500 {
      width: 378px;
      .item {
        width: 378px;
      }
      .months-info {
        height: 46px;
      }
    }

    .item {
      position: absolute;
      bottom: 0;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      transform-origin: top;
      transform: rotateX(0deg);
      transition: 1.5s ease-in;
      border: 1px solid #3a3a3a;
    }
    .page-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      &.front {
        z-index: 100;
      }
    }
    .customization {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      .page-img.front {
        height: 80%;
        &.fill {
          height: 100%;
        }
      }
      .months-info {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20%;
        z-index: 100;
      }
    }

    button {
      cursor: pointer;
      user-select: none;
      border: 0;
      padding: 0 1.2em;
      background: transparent;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      outline: none;
      .iconfont {
        display: block;
        font-size: 20px;
      }
    }

  }
</style>
